<template>
  <div class="bodyfat">
    <CardTitle :titleText="i18n.t('muscle_balance_1016')" />
    <div class="bodyfat_content">
      <div class="top_flag flex">
        <div class="flex-center-center">
          <div class="shape1"></div>
          <div class="top_flag_text">{{ i18n.t('muscle_balance_1001') }}</div>
        </div>
        <div class="flex-center-center flag_item">
          <div class="shape2"></div>
          <div class="top_flag_text">{{ i18n.t('muscle_balance_1018') }}</div>
        </div>
      </div>
      <div class="bodyfat_content_main justify-content-center">
        <img
          class="body_img"
          :src="require(`@/assets/images/eight_electrodes_report/icon_body_${gender}.png`)"
        />
        <img
          class="muscle_line muscle_line_left_top"
          src="@/assets/images/eight_electrodes_report/muscle_line.png"
        />
        <img
          class="muscle_line muscle_line_right_top"
          src="@/assets/images/eight_electrodes_report/muscle_line.png"
        />
        <img
          class="muscle_line muscle_line_left_middle"
          src="@/assets/images/eight_electrodes_report/muscle_line_big.png"
        />
        <img
          class="muscle_line muscle_line_left_bottom"
          src="@/assets/images/eight_electrodes_report/muscle_line_middle.png"
        />
        <img
          class="muscle_line muscle_line_right_bottom"
          src="@/assets/images/eight_electrodes_report/muscle_line_middle.png"
        />
        <div class="muscle_item left_upper_limp"></div>
        <!-- 左上肢 -->
        <div class="muscle_item left_upper_limp">
          <div class="muscle_item_top">
            <img
              src="@/assets/images/eight_electrodes_report/left_upper_limp.png"
              class="muscle_item_top_icon"
            />
            <div
              class="muscle_item_top_tag"
              :style="{ background: BodyfatLeftArmReport.levelIndexColor }"
            >
              {{ i18n.t(BodyfatLeftArmReport.levelIndexName) }}
            </div>
          </div>
          <p class="muscle_item_top_text">
            {{ i18n.t(BodyfatLeftArmReport.name) }}
          </p>
          <div class="standard_ratio flex align-items-center">
            <div class="shape1"></div>
            {{ BodyfatLeftArmReport.value }}%
          </div>
          <div class="fat flex align-items-center">
            <div class="shape2"></div>
            {{ BodyfatLeftArmWeight }}
          </div>
        </div>
        <!-- 右上肢 -->
        <div class="muscle_item right_upper_limp align-items-end">
          <div class="muscle_item_top">
            <div
              class="muscle_item_top_tag right_angle_right_bottom"
              :style="{ background: BodyfatRightArmReport.levelIndexColor }"
            >
              {{ i18n.t(BodyfatRightArmReport.levelIndexName) }}
            </div>
            <img
              src="@/assets/images/eight_electrodes_report/right_upper_limp.png"
              class="muscle_item_top_icon"
            />
          </div>
          <p class="muscle_item_top_text text-align">{{ i18n.t(BodyfatRightArmReport.name) }}</p>
          <div class="standard_ratio align-items-center">
            <div class="shape1"></div>
            {{ BodyfatRightArmReport.value }}%
          </div>
          <div class="fat align-items-center">
            <div class="shape2"></div>
            {{ BodyfatRightArmWeight }}
          </div>
        </div>
        <!-- 躯干 -->
        <div class="muscle_item center_limp">
          <div class="muscle_item_top">
            <img
              src="@/assets/images/eight_electrodes_report/center_limp.png"
              class="muscle_item_top_icon"
            />
            <div
              class="muscle_item_top_tag"
              :style="{ background: BodyfatTrunkReport.levelIndexColor }"
            >
              {{ i18n.t(BodyfatTrunkReport.levelIndexName) }}
            </div>
          </div>
          <p class="muscle_item_top_text">{{ i18n.t(BodyfatTrunkReport.name) }}</p>
          <div class="standard_ratio align-items-center">
            <div class="shape1"></div>
            {{ BodyfatTrunkReport.value }}%
          </div>
          <div class="fat flex align-items-center">
            <div class="shape2"></div>
            {{ BodyfatTrunkWeight }}
          </div>
        </div>
        <!-- 左下肢 -->
        <div class="muscle_item left_lower_limp">
          <div class="muscle_item_top">
            <img
              src="@/assets/images/eight_electrodes_report/left_lower_limp.png"
              alt=""
              class="muscle_item_top_icon"
            />
            <div
              class="muscle_item_top_tag"
              :style="{ background: BodyfatLeftLegReport.levelIndexColor }"
            >
              {{ i18n.t(BodyfatLeftLegReport.levelIndexName) }}
            </div>
          </div>
          <p class="muscle_item_top_text">{{ i18n.t(BodyfatLeftLegReport.name) }}</p>
          <div class="standard_ratio align-items-center">
            <div class="shape1"></div>
            {{ BodyfatLeftLegReport.value }}%
          </div>
          <div class="fat align-items-center">
            <div class="shape2"></div>
            {{ BodyfatLeftLegWeight }}
          </div>
        </div>
        <!-- 右下肢 -->
        <div class="muscle_item right_lower_limp align-items-end">
          <div class="muscle_item_top">
            <div
              class="muscle_item_top_tag right_angle_right_bottom"
              :style="{ background: BodyfatRightLegReport.levelIndexColor }"
            >
              {{ i18n.t(BodyfatRightLegReport.levelIndexName) }}
            </div>
            <img
              src="@/assets/images/eight_electrodes_report/right_lower_limp.png"
              alt=""
              class="muscle_item_top_icon"
            />
          </div>
          <p class="muscle_item_top_text text-align">{{ i18n.t(BodyfatRightLegReport.name) }}</p>
          <div class="standard_ratio align-items-center">
            <div class="shape1"></div>
            {{ BodyfatRightLegReport.value }}%
          </div>
          <div class="fat align-items-center">
            <div class="shape2"></div>
            {{ BodyfatRightLegWeight }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Big from 'big.js';
import { Component, Vue, Prop } from 'vue-property-decorator'
import { toFixedString } from '@/assets/ts/eight_electrodes_report/Util'
import CardTitle from './CardTitle.vue'
import { generateUnitValueFn } from '@/assets/ts/eight_electrodes_report/Util'
import { TypedScaleData, TypedConfig } from '@yolanda-qn/eight-electrodes-report-lib/dist/types/src/typings'
import getMeasureData,{ consts, ReportItem } from '@yolanda-qn/eight-electrodes-report-lib'

@Component({
  components: { CardTitle },
})
export default class extends Vue {
  @Prop() measureData!: TypedScaleData
  @Prop() weight_unit!: consts.WeightUnitEnum
  @Prop() config!: TypedConfig

  BodyfatLeftArmReport: any = {}
  BodyfatLeftArmWeight = ''
  BodyfatRightArmReport: any = {}
  BodyfatRightArmWeight = ''
  BodyfatLeftLegReport: any = {}
  BodyfatLeftLegWeight = ''
  BodyfatRightLegReport: any = {}
  BodyfatRightLegWeight = ''
  BodyfatTrunkReport: any = {}
  BodyfatTrunkWeight = ''
  toFixedString = toFixedString
  gender = 'male'
  mounted() {
    console.log(this.measureData);
    this.getReportDetail()
    this.gender = this.measureData.gender === 1 ? 'male' : 'female'
  }
  getReportDetail() {
    const {
      bodyfat_left_arm,
      bodyfat_right_arm,
      bodyfat_left_leg,
      bodyfat_right_leg,
      bodyfat_trunk,
    } = this.measureData
    const ReportIdsMapping = consts.ReportBuilderIdsEnum
    this.BodyfatLeftArmReport = getMeasureData(this.measureData, {
      ...this.config,
      builderIds: [ReportIdsMapping.BodyfatLeftArm],
    }).map((item) => item.toObject())[0]
    this.BodyfatLeftArmWeight = this.calcWeight(bodyfat_left_arm)
    this.BodyfatRightArmReport = getMeasureData( this.measureData, {
      ...this.config,
      builderIds:[ReportIdsMapping.BodyfatRightArm],
    }).map((item) => item.toObject())[0]
    this.BodyfatRightArmWeight = this.calcWeight(bodyfat_right_arm)
    this.BodyfatLeftLegReport = getMeasureData(this.measureData, {
      ...this.config,
      builderIds:[ReportIdsMapping.BodyfatLeftLeg],
    }).map((item) => item.toObject())[0]
    this.BodyfatLeftLegWeight = this.calcWeight(bodyfat_left_leg)
    this.BodyfatRightLegReport = getMeasureData(this.measureData, {
      ...this.config,
      builderIds:[ReportIdsMapping.BodyfatRightLeg],
    }).map((item) => item.toObject())[0]
    this.BodyfatRightLegWeight = this.calcWeight(bodyfat_right_leg)
    this.BodyfatTrunkReport = getMeasureData(this.measureData, {
      ...this.config,
      builderIds:[ReportIdsMapping.BodyfatTrunk],
    }).map((item) => item.toObject())[0]
    this.BodyfatTrunkWeight = this.calcWeight(bodyfat_trunk)
  }
  calcWeight(value: number) {
    const reportItem = new ReportItem();
    reportItem.setIsNeedTransformWeightValueByUnit(true);
    reportItem.setValue(Big(value).times(this.measureData.weight).div(100).toNumber());
    reportItem.setUnitValue(this.config.weightUnit);
    const reportItemObject = reportItem.toObject();
    // 对st_lb展示格式处理一下
    if (reportItemObject.unitValue === consts.WeightUnitEnum.st_lb) {
      reportItemObject.value = `${reportItemObject.value}`.replace(':', 'st.') + 'lb';
      reportItemObject.unit = '';
    }

    return `${reportItemObject.value}${reportItemObject.unit}`;
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import '../index.scss';
.bodyfat {
  margin-top: rem(20);
  background: #fff;
  border-radius: rem(16);
  box-shadow: 0px rem(3) rem(4) 0px rgba(0, 0, 0, 0.03);
  .bodyfat_content {
    margin-top: rem(30);
    padding: 0 rem(24) rem(47) rem(24);
  }
  .bodyfat_content_main {
    position: relative;
  }
  .body_img {
    display: block;
    height: rem(696);
    width: rem(250);
  }
  .muscle_line {
    height: rem(29);
    width: rem(176);
    position: absolute;
  }
  .muscle_line_left_top {
    left: rem(80);
    top: rem(132);
  }
  .muscle_line_right_top {
    right: rem(80);
    top: rem(132);
    transform: rotateY(180deg);
  }
  .muscle_line_left_middle {
    height: rem(93);
    width: rem(249);
    left: rem(77);
    top: rem(280);
  }
  .muscle_line_left_bottom {
    width: rem(216);
    left: rem(76);
    bottom: rem(66);
  }
  .muscle_line_right_bottom {
    width: rem(216);
    right: rem(76);
    bottom: rem(66);
    transform: rotateY(180deg);
  }
  .muscle_item {
    position: absolute;
    display: flex;
    flex-direction: column;
    .muscle_item_top {
      display: flex;
      .muscle_item_top_icon {
        width: rem(36);
        height: rem(36);
      }
      .muscle_item_top_tag {
        margin: rem(0) rem(10);
        padding: 0 rem(10);
        height: rem(24);
        font-size: rem(16);
        line-height: rem(24);
        color: white;
        margin-top: rem(5);
        border-radius: rem(16) rem(16) rem(16) 0;
        &.right_angle_right_bottom {
          border-radius: rem(16) rem(16) 0 rem(16);
        }
      }
    }
    .muscle_item_top_text {
      height: rem(33);
      line-height: rem(33);
      font-size: rem(24);
      font-weight: 500;
      color: #2a2e31;
      width: rem(220);
      margin: rem(1) rem(45);
      @include text-overflow;
    }
    .standard_ratio {
      width: fit-content;
      color: rgba(144, 144, 144, 1);
      font-size: rem(22);
      line-height: rem(30);
      height: rem(30);
      margin-top: rem(10);
      padding-bottom: rem(15);
      border-bottom: rem(2) dashed rgba(204, 204, 204, 1);
    }
    .fat {
      width: fit-content;
      color: rgba(144, 144, 144, 1);
      font-size: rem(22);
      line-height: rem(30);
      height: rem(30);
      margin-top: rem(10);
    }
  }
  .left_upper_limp {
    top: rem(-25);
    left: 0;
  }
  .right_upper_limp {
    top: rem(-25);
    right: 0;
  }
  .center_limp {
    top: rem(190);
    left: rem(0);
  }
  .left_lower_limp {
    bottom: rem(100);
    left: 0;
  }
  .right_lower_limp {
    bottom: rem(100);
    right: 0;
  }
}
.top_flag {
  width: 100%;
  align-items: center;
  font-size: rem(22);
  margin-bottom: rem(60);
  .flag_item {
    margin-left: rem(18);
  }
  .top_flag_text {
    margin-left: rem(10);
  }
}
.shape1 {
  width: rem(16);
  height: rem(16);
  background-color: #9bde56;
  margin-right: rem(12);
}
.shape2 {
  width: rem(16);
  height: rem(16);
  border-radius: rem(8);
  background-color: #85b5ec;
  margin-right: rem(12);
}
</style>
